<template>
  <div class="header-container">
    <router-link to="/" tag="div" class="logo">阎良基地多能互补系统</router-link>
    <el-menu
      mode="horizontal"
      background-color="#2D5F8B"
      text-color="#fff"
      :default-active="defaultActive"
      active-text-color="#fff"
    >
      <div style="display: inline-block; height: 100%;" v-for="(item, index) in menuData" :key="index">
        <el-menu-item
          style="height: 100%"
          :index="`${index}`"
          @click="goto({
            path: item.path,
            index: index
          })"
          v-if="!item.children">
          <span :class="'iconfont ' + item.icon "></span>
          {{ item.title }}
        </el-menu-item>
        <el-submenu :index="`${index}`" v-else>
          <template slot="title">
            <span :class="'iconfont ' + item.icon "></span>
            {{ item.title }}</template>
          <el-menu-item 
            :index="`${index + '-' + inde}`"
            v-for="(ite, inde) in item.children"
            :key="inde"
            @click="goto({
              path: ite.path,
              index: inde
            }, {
              path: item.path,
              index: index
            })"
          >{{ite.title}}</el-menu-item>
        </el-submenu>
      </div>
    </el-menu>
    <div class="user-container">
      <ul class="config">
        <li>温度：{{ config.emperature || '-' }}</li>
        <li>湿度：{{ config.humidity || '-' }}</li>
        <li>照度：{{ config.intensity || '-' }}</li>
        <li>pm2.5：{{ config.pmtwentyFive || '-' }}</li>
      </ul>
      <el-badge :value="tableData.length" class="item">
        <i class="el-icon-message-solid" @click="dataShow = true"></i>
      </el-badge>
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ userInfo.nickname }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <span @click="infoEdit">信息修改</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span @click="changePwd">密码修改</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span @click="loginOut">退出系统</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 信息修改弹窗 -->
    <el-dialog title="信息修改" :visible.sync="infoShow" width="600px" center @close="infoClose">
      <el-form ref="form" label-width="80px">
        <el-form-item label="昵称">
          <el-input v-model="nickname"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoClose">取 消</el-button>
        <el-button type="primary" @click="infoSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="密码修改" :visible.sync="pwdShow" width="600px" center @close="pwdClose">
      <el-form ref="form" label-width="80px">
        <el-form-item label="旧密码">
          <el-input v-model="pwdForm.oldPassWord"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="pwdForm.passWord"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pwdClose">取 消</el-button>
        <el-button type="primary" @click="pwdSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 报警信息弹窗 -->
    <el-dialog title="报警数据" :visible.sync="dataShow" width="800px" center @close="dataClose">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="地点" prop="address"></el-table-column>
        <el-table-column label="事件" prop="warnmes"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.status === 'UNREAD' ? '未处理' : '已处理' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" v-if="scope.row.status === 'UNREAD'" @click="warnClick(scope.row.id)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { cache } from "@utils";

export default {
  data() {
    return {
      defaultActive: "",
      infoShow: false,
      nickname: null,
      pwdShow: false,
      dataShow: false,
      pwdForm: {
        oldPassWord: null,
        passWord: null
      },
      timer: null,
      tableData: [],
      userInfo: cache.get("userInfo"),
      config: {
        emperature: null, // 温度
        humidity: null, // 湿度
        intensity: null, // 照度
        pmtwentyFive: null // PM2.5
      }
    };
  },
  computed: {
    menuData() {
      let arr = this.$router.options.routes[0].children.filter(
        item => !item.hidden
      );
      return arr
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  mounted() {
    this.defaultActive = "/" + this.$route.path.split("/")[1];
    this.getWarnList()
    this.getConfig()
    this.timer = setInterval(() => {
      this.getWarnList()
    }, 5000)
  },
  watch: {
    $route(newVal) {
      this.defaultActive = "/" + newVal.path.split("/")[1];
    }
  },
  methods: {
    async getConfig () {
      const result = await this.$fetchGet('/config/getConfig')
      this.config = {
        emperature: result.result.emperatureStr, // 温度
        humidity: result.result.humidityStr, // 湿度
        intensity: result.result.intensityStr, // 照度
        pmtwentyFive: result.result.pmTwentyFive // PM2.5
      }
    },
    async getWarnList () {
      const result = await this.$fetchGet('/warn/findWarnsByStatus')
      this.tableData = result.result
    },
    goto (one, tow) {
      console.log(one, tow)
      this.defaultActive = tow ? `${tow.index}-${one.index}` : `${one.index}`
      let path = tow ? `${tow.path}/${one.path}` : `${one.path}`
      console.log(path)
      this.$router.push(path)
    },
    async warnClick (id) {
      const result = await this.$fetchGet(`warn/dealwithWarn/${id}`)
      this.getWarnList()
    },
    async readClick (id) {
      const result = await this.$fetchGet(`warn/read/${id}`)
      this.getWarnList()
    },
    dataClose () {
      this.dataShow = false
    },
    infoEdit() {
      this.nickname = this.userInfo.nickname;
      this.infoShow = true;
    },
    infoClose() {
      this.infoShow = false;
    },
    async infoSubmit() {
      const result = await this.$fetchPost('/user/updateUserInfo', {
        id: this.userInfo.id,
        nickname: this.nickname
      })
      if (!result.success) {
        this.$message.error(result.error)
        return
      }
      this.$message.success("信息更新成功");
      this.infoShow = false;
      this.userInfo.nickname = this.nickname
      cache.set('userInfo', this.userInfo)
    },
    changePwd() {
      this.pwdShow = true;
    },
    pwdClose() {
      this.pwdShow = false;
      this.pwdForm = {
        oldPassWord: null,
        passWord: null
      };
    },
    async pwdSubmit() {
      const result = await this.$fetchPost('/user/updatePassByOld', {
        userName: this.userInfo.userName,
        passWord: this.pwdForm.passWord,
        oldPassWord: this.pwdForm.oldPassWord
      })
      if (!result.success) {
        this.$message.error(result.error)
        return
      }
      this.pwdShow = false;
      this.$message.success("密码修改成功");
    },
    async loginOut() {
      this.$confirm("确认退出系统?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const res = await this.$fetchGet('/user/loginOut')
          console.log(res)
          cache.remove("userInfo");
          this.$message.success("退出成功");
          this.$router.push("/login");
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="less">
.header-container {
  display: flex;
  background: #2d5f8b;
  .logo {
    line-height: 60px;
    padding: 0 50px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
  }
  .el-menu {
    flex: 1;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: none;
    .el-menu-item.is-active {
      // background: #d64635 !important;
      // border-bottom-color: #d64635 !important;
    }
  }
  .user-container {
    padding: 0 30px;
    line-height: 60px;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    display: flex;
    .config {
      display: flex;
      margin-right: 50px;
      li {
        margin-right: 20px;
      }
    }
    .el-badge {
      margin-right: 30px;
      .el-badge__content.is-fixed {
        top: 17px;
      }
    }
    .el-dropdown {
      color: #fff;
    }
  }
}
</style>